<template>
  <div class="hour-info-item">
    <flex-box center-h-v direction="column">
      <div class="time">20:00</div>
      <div class="temperature">28°</div>
      <div>
        <image-box :src="require('@/assets/icon/weather/duoyun.png')" size="20" />
      </div>
      <flex-box center-v class="windy-wrapper">
        <image-box class="icon" :src="require('@/assets/icon/weather/fengli.png')" size="10" />
        2级
      </flex-box>
      <div class="air-quality">优</div>
    </flex-box>
  </div>
</template>

<script>
import FlexBox from "@/components/flex-box/index";
import ImageBox from "@components/image-box";
export default {
  name: "HourInfoItem",
  components: {ImageBox, FlexBox},
  data() {
    return {}
  },
  methods: {},

  created() {

  },

  mounted() {

  }

}
</script>

<style lang="scss" scoped>
.hour-info-item {
  margin-right: 20px;
  font-size: 0.7rem;
  line-height: 2;
  &:nth-last-child(1) {
    padding-right: 24px;
  }

  .time {
    opacity: 0.6;
  }

  .temperature {
    font-size: 1.1rem;
    font-weight: 600;
  }

  .windy-wrapper {
    .icon {
      margin-right: 2px;
    }
  }

  .air-quality {
    background-color: rgba(255,255,255, .3);
    padding: 0 12px;
    border-radius: 9999em;
    line-height: 1.8;
    font-size: 0.6rem;
    margin-top: 10px;
  }
}
</style>
